import { BellOutline } from 'antd-mobile-icons';
import React, { Component } from 'react';
import '../../assets/font/iconfont.css'
import '../../styles/index/Mine.scss'

class Mine extends Component {
  constructor(props) {
    super(props)
    this.state = {
      list1: [
        { font: "icon-icon-test2", name: "待支付" },
        { font: "icon-icon-test3", name: "待发货" },
        { font: "icon-icon-test1", name: "待发货" },
        { font: "icon-icon-test", name: "待发货" },
        { font: "icon-icon-test9", name: "待发货" },
      ],
      list2: [
        { font: "icon-icon-test7", name: "地址管理" },
        { font: "icon-icon-test4", name: "发票管理" },
        { font: "icon-icon-test14", name: "我的收藏" },
        { font: "icon-icon-test11", name: "浏览记录" },
        { font: "icon-icon-test", name: "在线客服" },
        { font: "icon-icon-test5", name: "意见反馈" },
        { font: "icon-icon-test6", name: "系统设置" },
        { font: "icon-icon-test10", name: "关于我们" },
      ]
    }
  }

  go(index) {
    // console.log(index);
    // 去收藏页
    if (index === 2) {
      // console.log(55);
      this.props.history.push({ pathname: '/like', state: { id: 1 } });
    }
    // 去系统设置
    if (index === 6) {
      this.props.history.push('/set');
    }
  }
  render() {
    return (
      <div className='mine'>
        <div className="notice4">
          <BellOutline />
        </div>
        <div className="top4">
          <div className="left41">
            <img src={JSON.parse(localStorage.getItem('use')).pic} alt="" />
          </div>
          <div className="right41">
            <div className="p41">{JSON.parse(localStorage.getItem('use')).name}</div>
            <div className="p42">{JSON.parse(localStorage.getItem('use')).phone}</div>
          </div>
        </div>
        <div className="order4">
          <div className="title4">
            <h3>我的订单</h3>
            <p className='you41'>查看全部</p>
          </div>
          <div className="main41">
            {
              this.state.list1.map((item, index) => {
                return (
                  <div className="item41" key={index}>
                    <span className={'iconfont ' + item.font}></span>
                    <p className='xia41'>{item.name}</p>
                  </div>
                )
              })
            }
          </div>
        </div>
        <div className="common4">
          <h3>常用功能</h3>
          <div className="main42">
            {
              this.state.list2.map((item, index) => {
                return (
                  <div className="item41" onClick={() => { this.go(index) }} key={index}>
                    <span className={'iconfont ' + item.font}></span>
                    <p className='xia41'>{item.name}</p>
                  </div>
                )
              })
            }
          </div>
        </div>
      </div>
    );
  }
}

export default Mine;